<!--
<template>

    <el-steps :space="200" :active="2" finish-status="success">
        <el-step title="进行中"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="已完成"></el-step>

    </el-steps>

</template>


<script>
    export default {
        data() {
            return {

                form: {
                    phone: 110,
                    date:''
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

-->
<template>
    <div class="chat">
        <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%" :row-class-name="tableRowClassName">
        >
        <el-table-column type="expand">
            <template slot-scope="props">
                <el-steps :active=props.row.status finish-status="success">
                    <el-step title="报修成功"></el-step>
                    <el-step title="开始维修"></el-step>
                    <el-step title="维修完成"></el-step>
                </el-steps>
            </template>

        </el-table-column>

        <el-table-column label="期望维修日期" prop="date">
        </el-table-column>
        <el-table-column label="故障名称" prop="name">
        </el-table-column>
        <el-table-column label="描述" prop="desc">
        </el-table-column>
        <el-table-column align="right">
            <template slot="header" slot-scope="scope">
                <el-input v-model="search" placeholder="输入关键字搜索" />
            </template>
            <template slot-scope="scope">
                <el-popover placement="right" width="550" trigger="click">


                    <el-rate style="height: 40px;margin-left: 10px" v-model="evaluate.value" disabled show-score
                        text-color="#ff9900" score-template="{value}">
                    </el-rate>

                    <el-input style="margin-left: 10px" type="text" placeholder="请输入评分" v-model="evaluate.value"
                        maxlength="1" show-word-limit>
                    </el-input>

                    <el-input type="textarea" style="margin-left: 10px" placeholder="建议" v-model="evaluate.advice"
                        maxlength="30" show-word-limit>
                    </el-input>
                    <el-button type="success" style="margin-left: 50px"
                        @click="onsubmitEvaluate(scope.$index, scope.row)">确认评价</el-button>
                    <el-button type="success" style="margin-left: 50px" @click="test">重置</el-button>

                    <el-button slot="reference" style="margin: 5px">评分</el-button>
                </el-popover>
                <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>

        </el-table-column>

    </el-table>
    </div>
</template>

<style>
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}

.el-table .warning-row {
    background: ivory;
    font-weight: bold;
    color: #ff7d34;
}

.el-table .success-row {
    background: mintcream;
    font-weight: bold;
    color: #7700ff;
}

.el-table .info-row {
    font-weight: bold;
}
</style>

<script>
// eslint-disable-next-line no-unused-vars
import { request } from "@/axios/request"
export default {

    data() {
        return {
            value: 3.7,
            evaluate: { value: 5.0, advice: "" },
            tableData: [],
            search: "",
            dialogVisible: false,
            visible: false
        }
    },
    created() {
        this.getAll();
    },
    methods: {
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 3 == 1) {
                return 'success-row';
            } else if (rowIndex % 3 == 2) {
                return 'info-row';
            }
            return 'warning-row';


        },
        test() {
            this.evaluate.value = 5;
            this.evaluate.advice = ""
        },
        onsubmitEvaluate(index, row) {
            request({
                url: "/malfunction/evaluate/" + row.id + "/" + this.evaluate.value + "/" + this.evaluate.advice,
                method: "put",
            }).then((res) => {
                if (res.data.stateCode == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error'
                    })
                }
            }).catch(() => {
                this.getAll();
            });
        },
        // eslint-disable-next-line no-unused-vars

        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
            this.$confirm('确认删除？')
                .then(_ => {
                    request({
                        url: "/malfunction/" + row.id,
                        method: "delete",
                    }).then((res) => {
                        if (res.data.stateCode == 200) {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            })
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            })
                        }
                    });
                })
                .finally(_ => {
                    this.getAll();
                });

        },
        getAll() {
            request({
                url: "/malfunction",
                method: "get",
            }).then((res) => {
                this.$nextTick(() => {
                    this.tableData = res.data.object;

                })

            });
        }
    }
}
</script>


